<template>
  <div>
       <Jie :nameList="nameList">
        <template #header>
          <h2 class="header">0516学生列表</h2>
        </template>
        <template #nameItem="{person}">
            <ul>
              <li :style="{background:person.age<18?'red':''}">
                {{person.name}}---{{person.age}}
              </li>
            </ul>
        </template>
       </Jie>
    
  </div>
</template>

<script>
import Jie from '@/components/Jie'
export default {
  name: "App",
  components: {
    Jie
  },
  data() {
    return {
      nameList:[
        { id: "001",
         name: "螺蛳粉",
          age: 12 
        },
        {
          id: "002",
          name: "操场上见",
          age:23,
        },
        { id: "003",
         name:  "CS",
          age: 24
        },
      ]
    }
  },
};
</script>

<style scoped>
.typeList{
  display: flex;
  justify-content: space-around;
}
.header{
  background: orchid;
}
</style>
